<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-button type="primary" @click="showDiaLog=true">添加页面</el-button>
          <div class="top">
            <el-select v-model="classification" placeholder="全部分类">
              <el-option label="全部分类" value="" />
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
            <el-select v-model="broker" placeholder="全部经纪">
              <el-option label="全部经纪" value="" />
              <el-option
                v-for="item in economicData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-input v-model="content" placeholder="请输入内容">
              <template slot="append">
                <el-button slot="append" icon="el-icon-search" @click="searchFn" />
              </template>
            </el-input>
          </div>
        </div>
        <el-divider />
        <!-- 表格-------------------- -->
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column

            v-slot="{row}"
            label="封面"
          >
            <img :src="row.image" style="width:100px">
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
          />
          <el-table-column
            v-slot="{row}"
            label="标签"
          >

            <el-tag v-for="(v,i) in row.tags" :key="i" type="success">{{ v }}</el-tag>
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
          />
          <el-table-column
            prop="category.title"
            label="分类"
          />
          <el-table-column
            prop="agent.name"
            label="经纪"
          />
          <el-table-column
            prop="price"
            label="价格"
          />
          <el-table-column
            prop="desc"
            label="介绍"
          />
          <el-table-column
            v-slot="{row}"
            label="图片"
          >
            <img v-for="(v,i) in row.photos" :key="i" :src="v" alt="" style="width:50px;height:50px">
          </el-table-column>
          <el-table-column
            v-slot="{row}"
            prop="address"
            label="操作"
            width="200"
          >
            <el-button type="primary" @click="editFn(row.id)">编辑</el-button>
            <el-button type="danger" @click="delFn(row.id)">删除</el-button>
          </el-table-column>
        </el-table>
        <!-- 表格-------------------- -->

        <el-pagination
          style="text-align:center;padding-top:20px"
          background
          layout="prev, pager, next, total"
          :total="total"
          :page-size="queryData._limit"
          @current-change="pagChangeFn"
        />

      </el-card>
    </div>
    <DiaLog ref="edit" :is-show-dia-log.sync="showDiaLog" :category-data="options" :eco-data="economicData" @addHouseList="addHouseListFn" />
  </div>
</template>

<script>

import DiaLog from './components/ShowDiaLog.vue'
import { getHouseList, getHouseListCount, delHouse } from '@/api/house'
import { getSortList } from '@/api/sort'
import { getEconomicList } from '@/api/economic'
export default {
  components: {
    DiaLog
  },
  data() {
    return {
      showDiaLog: false,
      // 分类
      classification: '',
      // 经纪
      broker: '',
      content: '',
      total: 0,
      queryData: {
        _limit: 3,
        _start: 0

      },
      tableData: [],
      options: [],
      economicData: []

    }
  },
  created() {
    this.getHouseListFn()
    this.getSortListFn()
    this.getEconomicListFn()
  },
  methods: {
    /*

    */
    // 获取页面数据
    // 获取页面数据总数量
    async getHouseListFn(data) {
      this.tableData = await getHouseList({ ...this.queryData, ...data })
      this.total = await getHouseListCount(data)
    },

    // 分页
    pagChangeFn(page) {
      // console.log(page)
      this.queryData._start = (page - 1) * this.queryData._limit
      this.getHouseListFn()
    },
    // 获取分类列表
    async getSortListFn() {
      this.options = await getSortList()
    },
    // 获取经纪列表
    async getEconomicListFn() {
      this.economicData = await getEconomicList()
    },
    // 搜索功能
    async searchFn() {
      this.queryData._start = 0

      console.log(this.classification, this.broker, this.content)

      let data = {}
      if (!this.classification) {
        data = {
          title_contains: this.content,
          agent: this.broker
        }
      } else if (!this.broker) {
        data = {
          title_contains: this.content,
          category: this.classification
        }
      } else if (!this.content) {
        data = {
          category: this.classification,
          agent: this.broker
        }
      }

      this.getHouseListFn(data)
    },
    // 新增功能
    addHouseListFn() {
      this.getHouseListFn()
    },
    // 删除功能
    async delFn(id) {
      await this.$confirm('是否确认删除')
      await delHouse(id)
      this.getHouseListFn()
    },
    // 编辑功能
    editFn(v) {
      this.showDiaLog = true
      this.$refs.edit.getHouseByIdFn(v)
    }
  }

}
</script>

<style lang="scss" scoped>
.top {
  width: 50%;
  float: right;
  display: flex;
  justify-content: space-around;
}

</style>
